<template>
  <div>
    <!-- head -->
    <header>
      <h1>echart</h1>
      <div class="showTime"></div>
      <div class="select">
        <select
          id="test"
          @change="selectChange(selectValue)"
          v-model="selectValue"
        >
          <!-- <select id="test" onchange="selectChange(this.value)"> -->
          <option value="9">9</option>
          <option value="3">3</option>
          <option value="6">6</option>
        </select>
      </div>
    </header>
    <!-- 主体 -->
    <section class="mainbox">
      <div class="panel bar">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel line">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar2">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel line2">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie2">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>

      <div class="panel bar3">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel line3">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie3">
        <h2>表1</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { inject, onMounted, ref } from "vue";

let selectValue = ref();
let echarts = inject("echarts");
console.log(echarts);

// 展示时间
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
  clearTimeout(t); //清除定时器
  let dt = new Date();
  var y = dt.getFullYear();
  var mt = dt.getMonth() + 1;
  var day = dt.getDate();
  var h = dt.getHours(); //获取时
  var m = dt.getMinutes(); //获取分
  var s = dt.getSeconds(); //获取秒
  document.querySelector(".showTime").innerHTML =
    "当前时间：" +
    y +
    "年" +
    mt +
    "月" +
    day +
    "-" +
    h +
    "时" +
    m +
    "分" +
    s +
    "秒";
  t = setTimeout(time, 1000); //设定定时器，循环运行
}

function selectChange(value) {
  console.log(value);
  const box = document.querySelectorAll(".panel");
  for (let i = 0; i < box.length; i++) {
    box[i].classList.remove("none");
  }

  if (value != 9) {
    if (value == 3) {
      const bar2 = document.querySelector(".bar2");
      bar2.classList.add("none");
      console.log(bar2.classList, "------------name");
      const line2 = document.querySelector(".line2");
      line2.classList.add("none");
      const pie2 = document.querySelector(".pie2");
      pie2.classList.add("none");
    }
    const bar3 = document.querySelector(".bar3");
    bar3.classList.add("none");
    const line3 = document.querySelector(".line3");
    line3.classList.add("none");
    const pie3 = document.querySelector(".pie3");
    pie3.classList.add("none");
  }
}

onMounted(() => {
  window.addEventListener("resize", function () {
    location.reload();
  });
  // 柱状图模块1
  // .bar
  (function () {
    // 1实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    // 2. 指定配置项和数据
    var option = {
      color: ["#2f89cf"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      // 修改图表的大小
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "旅游行业",
            "教育培训",
            "游戏行业",
            "医疗行业",
            "电商行业",
            "社交行业",
            "金融行业",
          ],
          axisTick: {
            alignWithLabel: true,
          },
          // 修改刻度标签 相关样式
          axisLabel: {
            color: "rgba(255,255,255,.6) ",
            fontSize: "12",
          },
          // 不显示x坐标轴的样式
          axisLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          // 修改刻度标签 相关样式
          axisLabel: {
            color: "rgba(255,255,255,.6) ",
            fontSize: 12,
          },
          // y轴的线条改为了 2像素
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 2,
            },
          },
          // y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          barWidth: "35%",
          data: [200, 300, 300, 900, 1500, 1200, 600],
          itemStyle: {
            // 修改柱子圆角
            barBorderRadius: 5,
          },
        },
      ],
    };
    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
  // 柱状图2
  (function () {
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar2 .chart"));
    // 2. 指定配置和数据
    var option = {
      grid: {
        top: "10%",
        left: "22%",
        bottom: "10%",
        // containLabel: true
      },
      // 不显示x轴的相关信息
      xAxis: {
        show: false,
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
          // 不显示y轴的线
          axisLine: {
            show: false,
          },
          // 不显示刻度
          axisTick: {
            show: false,
          },
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: {
            color: "#fff",
          },
        },
        {
          data: [702, 350, 610, 793, 664],
          inverse: true,
          // 不显示y轴的线
          axisLine: {
            show: false,
          },
          // 不显示刻度
          axisTick: {
            show: false,
          },
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: {
            color: "#fff",
          },
        },
      ],
      series: [
        {
          name: "条",
          type: "bar",
          data: [70, 34, 60, 78, 69],
          yAxisIndex: 0,
          // 修改第一组柱子的圆角
          itemStyle: {
            barBorderRadius: 20,
            // 此时的color 可以修改柱子的颜色
            color: function (params) {
              // params 传进来的是柱子对象
              // console.log(params);
              // dataIndex 是当前柱子的索引号
              return myColor[params.dataIndex];
            },
          },
          // 柱子之间的距离
          barCategoryGap: 50,
          //柱子的宽度
          barWidth: 10,
          // 显示柱子内的文字
          label: {
            show: true,
            position: "inside",
            // {c} 会自动的解析为 数据  data里面的数据
            formatter: "{c}%",
          },
        },
        {
          name: "框",
          type: "bar",
          barCategoryGap: 50,
          barWidth: 15,
          yAxisIndex: 1,
          data: [100, 100, 100, 100, 100],
          itemStyle: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15,
          },
        },
      ],
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
  // 折线图1模块制作
  // .line
  (function () {
    var yearData = [
      {
        year: "2020", // 年份
        data: [
          // 两个数组是因为有两条线
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        ],
      },
      {
        year: "2021", // 年份
        data: [
          // 两个数组是因为有两条线
          [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
          [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34],
        ],
      },
    ];
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".line .chart"));

    // 2.指定配置
    var option = {
      // 通过这个color修改两条线的颜色
      color: ["#00f2f1", "#ed3f35"],
      tooltip: {
        trigger: "axis",
      },
      legend: {
        // 如果series 对象有name 值，则 legend可以不用写data
        // 修改图例组件 文字颜色
        textStyle: {
          color: "#4c9bfd",
        },
        // 这个10% 必须加引号
        right: "10%",
      },
      grid: {
        top: "20%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        show: true, // 显示边框
        borderColor: "#012f4a", // 边框颜色
        containLabel: true, // 包含刻度文字在内
      },

      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        axisTick: {
          show: false, // 去除刻度线
        },
        axisLabel: {
          color: "#4c9bfd", // 文本颜色
        },
        axisLine: {
          show: false, // 去除轴线
        },
      },
      yAxis: {
        type: "value",
        axisTick: {
          show: false, // 去除刻度线
        },
        axisLabel: {
          color: "#4c9bfd", // 文本颜色
        },
        axisLine: {
          show: false, // 去除轴线
        },
        splitLine: {
          lineStyle: {
            color: "#012f4a", // 分割线颜色
          },
        },
      },
      series: [
        {
          name: "新增粉丝",
          type: "line",
          // true 可以让我们的折线显示带有弧度
          smooth: true,
          data: yearData[0].data[0],
        },
        {
          name: "新增游客",
          type: "line",
          smooth: true,
          data: yearData[0].data[1],
        },
      ],
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
  // 折线图2 模块制作
  (function () {
    var myChart = echarts.init(document.querySelector(".line2 .chart"));
    var option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        top: "0%",
        data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },

      grid: {
        left: "10",
        top: "30",
        right: "10",
        bottom: "10",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          // x轴更换数据
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "26",
            "28",
            "29",
            "30",
          ],
          // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          // 修改分割线的颜色
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          name: "邮件营销",
          type: "line",
          smooth: true,
          // 单独修改当前线条的样式
          lineStyle: {
            color: "#0184d5",
            width: "2",
          },
          // 填充颜色设置
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
          // 设置拐点
          symbol: "circle",
          // 拐点大小
          symbolSize: 8,
          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          // 设置拐点颜色以及边框
          itemStyle: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12,
          },
          data: [
            30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30,
            60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40,
          ],
        },
        {
          name: "联盟广告",
          type: "line",
          smooth: true,
          lineStyle: {
            normal: {
              color: "#00d887",
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0, 216, 135, 0.4)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0, 216, 135, 0.1)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          // 设置拐点 小圆点
          symbol: "circle",
          // 拐点大小
          symbolSize: 5,
          // 设置拐点颜色以及边框
          itemStyle: {
            color: "#00d887",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12,
          },
          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          data: [
            130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40,
            130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20,
          ],
        },
      ],
    };
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
  // 饼形图1
  // pie
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie .chart"));
    // 2.指定配置
    var option = {
      color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },

      legend: {
        bottom: "0%",
        // 修改小图标的大小
        itemWidth: 10,
        itemHeight: 10,
        // 修改图例组件的文字为 12px
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },
      series: [
        {
          name: "年龄分布",
          type: "pie",
          // 这个radius可以修改饼形图的大小
          // radius 第一个值是内圆的半径 第二个值是外圆的半径
          radius: ["40%", "60%"],
          center: ["50%", "45%"],
          avoidLabelOverlap: false,
          // 图形上的文字
          label: {
            show: false,
            position: "center",
          },
          // 链接文字和图形的线是否显示
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: "0岁以下" },
            { value: 4, name: "20-29岁" },
            { value: 2, name: "30-39岁" },
            { value: 2, name: "40-49岁" },
            { value: 1, name: "50岁以上" },
          ],
        },
      ],
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();
  // 饼形图2 地区分布模块
  (function () {
    var myChart = echarts.init(document.querySelector(".pie2 .chart"));
    var option = {
      color: [
        "#006cff",
        "#60cda0",
        "#ed8884",
        "#ff9f7f",
        "#0096ff",
        "#9fe6b8",
        "#32c5e9",
        "#1d9dff",
      ],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        bottom: "0%",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },
      series: [
        {
          name: "地区分布",
          type: "pie",
          radius: ["10%", "70%"],
          center: ["50%", "50%"],
          roseType: "radius",
          // 图形的文字标签
          label: {
            fontSize: 10,
          },
          // 链接图形和文字的线条
          labelLine: {
            // length 链接图形的线条
            length: 6,
            // length2 链接文字的线条
            length2: 8,
          },
          data: [
            { value: 20, name: "云南" },
            { value: 26, name: "北京" },
            { value: 24, name: "山东" },
            { value: 25, name: "河北" },
            { value: 20, name: "江苏" },
            { value: 25, name: "浙江" },
            { value: 30, name: "四川" },
            { value: 42, name: "湖北" },
          ],
        },
      ],
    };
    myChart.setOption(option);
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();

  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie3 .chart"));
    // 2.指定配置

    var option = {
      tooltip: {
        show: true,
        // 控制提示框组件的显示位置
        position: ["60%", "10%"],
      },
      radar: {
        indicator: [
          { name: "机场", max: 100 },
          { name: "商场", max: 100 },
          { name: "火车站", max: 100 },
          { name: "汽车站", max: 100 },
          { name: "地铁", max: 100 },
        ],
        // 修改雷达图的大小
        radius: "65%",
        shape: "circle",
        // 分割的圆圈个数
        splitNumber: 4,
        name: {
          // 修饰雷达图文字的颜色
          textStyle: {
            color: "#4c9bfd",
          },
        },
        // 分割的圆圈线条的样式
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255, 0.5)",
          },
        },
        splitArea: {
          show: false,
        },
        // 坐标轴的线修改为白色半透明
        axisLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.5)",
          },
        },
      },
      series: [
        {
          name: "北京",
          type: "radar",
          // 填充区域的线条颜色
          lineStyle: {
            normal: {
              color: "#fff",
              width: 1,
              opacity: 0.5,
            },
          },
          data: [[90, 19, 56, 11, 34]],
          // 设置图形标记 （拐点）
          symbol: "circle",
          // 这个是设置小圆点大小
          symbolSize: 5,
          // 设置小圆点颜色
          itemStyle: {
            color: "#fff",
          },
          // 让小圆点显示数据
          label: {
            show: true,
            fontSize: 10,
          },
          // 修饰我们区域填充的背景颜色
          areaStyle: {
            color: "rgba(238, 197, 102, 0.6)",
          },
        },
      ],
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  // .line3 .chart
  (function () {
    var webkitDep = {
      type: "force",
      categories: [
        //关系网类别，可以写多组
        {
          name: "人物关系", //关系网名称
          keyword: {},
          base: "人物关系",
        },
      ],
      nodes: [
        //展示的节点
        {
          name: "刘烨", //节点名称
          value: 3,
          category: 0, //与关系网类别索引对应，此处只有一个关系网所以这里写0
        },
        {
          name: "霓娜",
          value: 1,
          category: 0,
        },
        {
          name: "诺一",
          value: 1,
          category: 0,
        },
      ],
      links: [
        //节点之间连接
        {
          source: 0, //起始节点，0表示第一个节点
          target: 1, //目标节点，1表示与索引为1的节点进行连接
        },
        {
          source: 0,
          target: 2,
        },
      ],
    };
    // var item = {
    //   name: "",
    //   value: 1200,
    //   // 1. 修改当前柱形的样式
    //   itemStyle: {
    //     color: "#254065",
    //   },
    //   // 2. 鼠标放到柱子上不想高亮显示
    //   emphasis: {
    //     itemStyle: {
    //       color: "#254065",
    //     },
    //   },
    //   // 3. 鼠标经过柱子不显示提示框组件
    //   tooltip: {
    //     extraCssText: "opacity: 0",
    //   },
    // };
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar3 .chart"));
    // 2. 指定配置和数据
    // var option = {
    //   color: new echarts.graphic.LinearGradient(
    //     // (x1,y2) 点到点 (x2,y2) 之间进行渐变
    //     0,
    //     0,
    //     0,
    //     1,
    //     [
    //       { offset: 0, color: "#00fffb" }, // 0 起始颜色
    //       { offset: 1, color: "#0061ce" }, // 1 结束颜色
    //     ]
    //   ),
    //   tooltip: {
    //     trigger: "item",
    //   },
    //   grid: {
    //     left: "0%",
    //     right: "3%",
    //     bottom: "3%",
    //     top: "3%",
    //     //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
    //     containLabel: true,
    //     // 是否显示直角坐标系网格
    //     show: true,
    //     //grid 四条边框的颜色
    //     borderColor: "rgba(0, 240, 255, 0.3)",
    //   },
    //   xAxis: [
    //     {
    //       type: "category",
    //       data: [
    //         "上海",
    //         "广州",
    //         "北京",
    //         "深圳",
    //         "合肥",
    //         "",
    //         "......",
    //         "",
    //         "杭州",
    //         "厦门",
    //         "济南",
    //         "成都",
    //         "重庆",
    //       ],
    //       axisTick: {
    //         alignWithLabel: false,
    //         // 把x轴的刻度隐藏起来
    //         show: false,
    //       },
    //       axisLabel: {
    //         color: "#4c9bfd",
    //       },
    //       // x轴这条线的颜色样式
    //       axisLine: {
    //         lineStyle: {
    //           color: "rgba(0, 240, 255, 0.3)",
    //           // width: 3
    //         },
    //       },
    //     },
    //   ],
    //   yAxis: [
    //     {
    //       type: "value",
    //       axisTick: {
    //         alignWithLabel: false,
    //         // 把y轴的刻度隐藏起来
    //         show: false,
    //       },
    //       axisLabel: {
    //         color: "#4c9bfd",
    //       },
    //       // y轴这条线的颜色样式
    //       axisLine: {
    //         lineStyle: {
    //           color: "rgba(0, 240, 255, 0.3)",
    //           // width: 3
    //         },
    //       },
    //       // y轴分割线的颜色样式
    //       splitLine: {
    //         lineStyle: {
    //           color: "rgba(0, 240, 255, 0.3)",
    //         },
    //       },
    //     },
    //   ],
    //   series: [
    //     {
    //       name: "直接访问",
    //       type: "bar",
    //       barWidth: "60%",
    //       data: [
    //         2100,
    //         1900,
    //         1700,
    //         1560,
    //         1400,
    //         item,
    //         item,
    //         item,
    //         900,
    //         750,
    //         600,
    //         480,
    //         240,
    //       ],
    //     },
    //   ],
    // };
    var option = {
      legend: {
        data: ["人物关系"], //此处的数据必须和关系网类别中name相对应
      },
      series: [
        {
          type: "graph",
          layout: "force",
          animation: false,
          label: {
            normal: {
              show: true,
              position: "right",
            },
          },
          draggable: true,
          data: webkitDep.nodes.map(function (node, idx) {
            node.id = idx;
            return node;
          }),
          categories: webkitDep.categories,
          force: {
            edgeLength: 105, //连线的长度
            repulsion: 100, //子节点之间的间距
          },
          edges: webkitDep.links,
        },
      ],
    };
    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  (function () {
    var myChart = echarts.init(document.querySelector(".line3 .chart"));

    const upColor = "#ec0000";
    const upBorderColor = "#8A0000";
    const downColor = "#00da3c";
    const downBorderColor = "#4c9bfd";
    // Each item: open，close，lowest，highest
    const data0 = splitData([
      ["2013/1/24", 2320.26, 2320.26, 2287.3, 2362.94],
      ["2013/1/25", 2300, 2291.3, 2288.26, 2308.38],
      ["2013/1/28", 2295.35, 2346.5, 2295.35, 2346.92],
      ["2013/1/29", 2347.22, 2358.98, 2337.35, 2363.8],
      ["2013/1/30", 2360.75, 2382.48, 2347.89, 2383.76],
      ["2013/1/31", 2383.43, 2385.42, 2371.23, 2391.82],
      ["2013/2/1", 2377.41, 2419.02, 2369.57, 2421.15],
      ["2013/2/4", 2425.92, 2428.15, 2417.58, 2440.38],
      ["2013/2/5", 2411, 2433.13, 2403.3, 2437.42],
      ["2013/2/6", 2432.68, 2434.48, 2427.7, 2441.73],
      ["2013/2/7", 2430.69, 2418.53, 2394.22, 2433.89],
      ["2013/2/8", 2416.62, 2432.4, 2414.4, 2443.03],
      ["2013/2/18", 2441.91, 2421.56, 2415.43, 2444.8],
      ["2013/2/19", 2420.26, 2382.91, 2373.53, 2427.07],
      ["2013/2/20", 2383.49, 2397.18, 2370.61, 2397.94],
      ["2013/2/21", 2378.82, 2325.95, 2309.17, 2378.82],
      ["2013/2/22", 2322.94, 2314.16, 2308.76, 2330.88],
      ["2013/2/25", 2320.62, 2325.82, 2315.01, 2338.78],
      ["2013/2/26", 2313.74, 2293.34, 2289.89, 2340.71],
      ["2013/2/27", 2297.77, 2313.22, 2292.03, 2324.63],
      ["2013/2/28", 2322.32, 2365.59, 2308.92, 2366.16],
      ["2013/3/1", 2364.54, 2359.51, 2330.86, 2369.65],
      ["2013/3/4", 2332.08, 2273.4, 2259.25, 2333.54],
      ["2013/3/5", 2274.81, 2326.31, 2270.1, 2328.14],
      ["2013/3/6", 2333.61, 2347.18, 2321.6, 2351.44],
      ["2013/3/7", 2340.44, 2324.29, 2304.27, 2352.02],
      ["2013/3/8", 2326.42, 2318.61, 2314.59, 2333.67],
      ["2013/3/11", 2314.68, 2310.59, 2296.58, 2320.96],
      ["2013/3/12", 2309.16, 2286.6, 2264.83, 2333.29],
      ["2013/3/13", 2282.17, 2263.97, 2253.25, 2286.33],
      ["2013/3/14", 2255.77, 2270.28, 2253.31, 2276.22],
      ["2013/3/15", 2269.31, 2278.4, 2250, 2312.08],
      ["2013/3/18", 2267.29, 2240.02, 2239.21, 2276.05],
      ["2013/3/19", 2244.26, 2257.43, 2232.02, 2261.31],
      ["2013/3/20", 2257.74, 2317.37, 2257.42, 2317.86],
      ["2013/3/21", 2318.21, 2324.24, 2311.6, 2330.81],
      ["2013/3/22", 2321.4, 2328.28, 2314.97, 2332],
      ["2013/3/25", 2334.74, 2326.72, 2319.91, 2344.89],
      ["2013/3/26", 2318.58, 2297.67, 2281.12, 2319.99],
      ["2013/3/27", 2299.38, 2301.26, 2289, 2323.48],
      ["2013/3/28", 2273.55, 2236.3, 2232.91, 2273.55],
      ["2013/3/29", 2238.49, 2236.62, 2228.81, 2246.87],
      ["2013/4/1", 2229.46, 2234.4, 2227.31, 2243.95],
      ["2013/4/2", 2234.9, 2227.74, 2220.44, 2253.42],
      ["2013/4/3", 2232.69, 2225.29, 2217.25, 2241.34],
      ["2013/4/8", 2196.24, 2211.59, 2180.67, 2212.59],
      ["2013/4/9", 2215.47, 2225.77, 2215.47, 2234.73],
      ["2013/4/10", 2224.93, 2226.13, 2212.56, 2233.04],
      ["2013/4/11", 2236.98, 2219.55, 2217.26, 2242.48],
      ["2013/4/12", 2218.09, 2206.78, 2204.44, 2226.26],
      ["2013/4/15", 2199.91, 2181.94, 2177.39, 2204.99],
      ["2013/4/16", 2169.63, 2194.85, 2165.78, 2196.43],
      ["2013/4/17", 2195.03, 2193.8, 2178.47, 2197.51],
      ["2013/4/18", 2181.82, 2197.6, 2175.44, 2206.03],
      ["2013/4/19", 2201.12, 2244.64, 2200.58, 2250.11],
      ["2013/4/22", 2236.4, 2242.17, 2232.26, 2245.12],
      ["2013/4/23", 2242.62, 2184.54, 2182.81, 2242.62],
      ["2013/4/24", 2187.35, 2218.32, 2184.11, 2226.12],
      ["2013/4/25", 2213.19, 2199.31, 2191.85, 2224.63],
      ["2013/4/26", 2203.89, 2177.91, 2173.86, 2210.58],
      ["2013/5/2", 2170.78, 2174.12, 2161.14, 2179.65],
      ["2013/5/3", 2179.05, 2205.5, 2179.05, 2222.81],
      ["2013/5/6", 2212.5, 2231.17, 2212.5, 2236.07],
      ["2013/5/7", 2227.86, 2235.57, 2219.44, 2240.26],
      ["2013/5/8", 2242.39, 2246.3, 2235.42, 2255.21],
      ["2013/5/9", 2246.96, 2232.97, 2221.38, 2247.86],
      ["2013/5/10", 2228.82, 2246.83, 2225.81, 2247.67],
      ["2013/5/13", 2247.68, 2241.92, 2231.36, 2250.85],
      ["2013/5/14", 2238.9, 2217.01, 2205.87, 2239.93],
      ["2013/5/15", 2217.09, 2224.8, 2213.58, 2225.19],
      ["2013/5/16", 2221.34, 2251.81, 2210.77, 2252.87],
      ["2013/5/17", 2249.81, 2282.87, 2248.41, 2288.09],
      ["2013/5/20", 2286.33, 2299.99, 2281.9, 2309.39],
      ["2013/5/21", 2297.11, 2305.11, 2290.12, 2305.3],
      ["2013/5/22", 2303.75, 2302.4, 2292.43, 2314.18],
      ["2013/5/23", 2293.81, 2275.67, 2274.1, 2304.95],
      ["2013/5/24", 2281.45, 2288.53, 2270.25, 2292.59],
      ["2013/5/27", 2286.66, 2293.08, 2283.94, 2301.7],
      ["2013/5/28", 2293.4, 2321.32, 2281.47, 2322.1],
      ["2013/5/29", 2323.54, 2324.02, 2321.17, 2334.33],
      ["2013/5/30", 2316.25, 2317.75, 2310.49, 2325.72],
      ["2013/5/31", 2320.74, 2300.59, 2299.37, 2325.53],
      ["2013/6/3", 2300.21, 2299.25, 2294.11, 2313.43],
      ["2013/6/4", 2297.1, 2272.42, 2264.76, 2297.1],
      ["2013/6/5", 2270.71, 2270.93, 2260.87, 2276.86],
      ["2013/6/6", 2264.43, 2242.11, 2240.07, 2266.69],
      ["2013/6/7", 2242.26, 2210.9, 2205.07, 2250.63],
      ["2013/6/13", 2190.1, 2148.35, 2126.22, 2190.1],
    ]);
    function splitData(rawData) {
      const categoryData = [];
      const values = [];
      for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
      }
      return {
        categoryData: categoryData,
        values: values,
      };
    }
    function calculateMA(dayCount) {
      var result = [];
      for (var i = 0, len = data0.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += +data0.values[i - j][1];
        }
        result.push(sum / dayCount);
      }
      return result;
    }
    let option = {
      title: {
        text: "上证指数",
        left: 0,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      legend: {
        data: ["日K", "MA5", "MA10", "MA20", "MA30"],
      },
      grid: {
        left: "10%",
        right: "10%",
        bottom: "15%",
      },
      xAxis: {
        type: "category",
        data: data0.categoryData,
        boundaryGap: false,
        axisLine: { onZero: false },
        splitLine: { show: false },
        min: "dataMin",
        max: "dataMax",
      },
      yAxis: {
        scale: true,
        splitArea: {
          show: true,
        },
      },
      dataZoom: [
        {
          type: "inside",
          start: 50,
          end: 100,
        },
        {
          show: true,
          type: "slider",
          top: "90%",
          start: 50,
          end: 100,
        },
      ],
      series: [
        {
          name: "日K",
          type: "candlestick",
          data: data0.values,
          itemStyle: {
            color: upColor,
            color0: downColor,
            borderColor: upBorderColor,
            borderColor0: downBorderColor,
          },
          markPoint: {
            label: {
              formatter: function (param) {
                return param != null ? Math.round(param.value) + "" : "";
              },
            },
            data: [
              {
                name: "Mark",
                coord: ["2013/5/31", 2300],
                value: 2300,
                itemStyle: {
                  color: "rgb(41,60,85)",
                },
              },
              {
                name: "highest value",
                type: "max",
                valueDim: "highest",
              },
              {
                name: "lowest value",
                type: "min",
                valueDim: "lowest",
              },
              {
                name: "average value on close",
                type: "average",
                valueDim: "close",
              },
            ],
            tooltip: {
              formatter: function (param) {
                return param.name + "<br>" + (param.data.coord || "");
              },
            },
          },
          markLine: {
            symbol: ["none", "none"],
            data: [
              [
                {
                  name: "from lowest to highest",
                  type: "min",
                  valueDim: "lowest",
                  symbol: "circle",
                  symbolSize: 10,
                  label: {
                    show: false,
                  },
                  emphasis: {
                    label: {
                      show: false,
                    },
                  },
                },
                {
                  type: "max",
                  valueDim: "highest",
                  symbol: "circle",
                  symbolSize: 10,
                  label: {
                    show: false,
                  },
                  emphasis: {
                    label: {
                      show: false,
                    },
                  },
                },
              ],
              {
                name: "min line on close",
                type: "min",
                valueDim: "close",
              },
              {
                name: "max line on close",
                type: "max",
                valueDim: "close",
              },
            ],
          },
        },
        {
          name: "MA5",
          type: "line",
          data: calculateMA(5),
          smooth: true,
          lineStyle: {
            opacity: 0.5,
          },
        },
        {
          name: "MA10",
          type: "line",
          data: calculateMA(10),
          smooth: true,
          lineStyle: {
            opacity: 0.5,
          },
        },
        {
          name: "MA20",
          type: "line",
          data: calculateMA(20),
          smooth: true,
          lineStyle: {
            opacity: 0.5,
          },
        },
        {
          name: "MA30",
          type: "line",
          data: calculateMA(30),
          smooth: true,
          lineStyle: {
            opacity: 0.5,
          },
        },
      ],
    };

    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();
});
</script>

<style lang="less" scoped>
.none {
  display: none;
}

header {
  position: relative;
  height: 1.25rem;
  background: url(../assets/head_bg.png) no-repeat;
  background-size: 100% 100%;
  h1 {
    color: white;
    font-size: 0.475rem;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    left: 0.375rem;
    top: 0;
    position: absolute;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
  }
  .select {
    right: 0.375rem;
    top: 0;
    position: absolute;
    line-height: 0.9375rem;
    height: 0.9375rem;
    width: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
  }
}

.mainbox {
  display: flex;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
  justify-content: flex-start;
  flex-wrap: wrap;
  .panel {
    position: relative;
    width: 420px;
    height: 3.8rem;
    padding: 0 0.1875rem 0.5rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-left:0.925rem;
    // margin-right: 0.625rem;
    margin-bottom: 0.1875rem;
    background: url(../assets/line\(1\).png) rgba(255, 255, 255, 0.03);
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      .panel-footer::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
      .panel-footer::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    h2 {
      height: 0.6rem;
      color: #fff;
      line-height: 0.6rem;
      text-align: center;
      font-size: 0.25rem;
      font-weight: 400;
      a {
        color: #fff;
        text-decoration: none;
        margin: 0 0.125rem;
      }
    }
    .chart {
      // height: 3.4rem;
      height: calc(100% - 5px);
      // height: 270px;calc(100% - 100px);
    }
  }
}
</style>
